<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 步骤2:准备一个呈现图表的盒子 -->
  <div style="width:600px;height:400px"></div>
  <!-- 步骤1:引入echarts.js文件 -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script>
    //分类数据的排名情况

    // 步骤3:初始化echarts实例对象
    var mycharts = echarts.init(document.querySelector('div'))
    // 步骤4:准备配置项
    var option = {
      title: {
        text: "成绩",
        link: "http://www.itcast.cn",
        subtext: 'echarts官网',
        sublink: "https://echarts.apache.org/zh/option.html#title.sublink",
        textStyle: {
          color: "#f0f"
        },
        subtextStyle: {
          fontStyle: "oblique"
        }
      },
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: "语文",
          type: "bar",
          data: [70, 92, 87]
        }
      ]
    }
    // 步骤5:将配置项设置给echarts实例对象
    mycharts.setOption(option)
  </script>
</body>
<!-- https://www.bilibili.com/video/BV1bh41197p8?p=5 -->

</html>